<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
</head>
<body style="height:3000px">
  <div id="app">
    <button @click="isShow = !isShow">{{ isShow?'隐藏':'显示' }}</button>
    <home v-if="isShow"></home>
  </div>
  <script>
    let Home = {
      template:`
        <div>
          <h4>home页</h4>  
          <button @click="add">add</button>
          <ul ref="oul" >
            <li v-for="item in arr"
              :key="item"
              >
              {{ item }}
            </li>
          </ul>
        </div>
      `,
      data(){
        return {
          arr:[1,2,3,4],
          timer:null
        }
      },
      methods:{
        add(){
          this.arr.push(this.arr.length+1)
        }
      },
      beforeCreate(){
        console.log("初始化之前")
      },
      created(){
        console.log("初始化已经完成，在这里可以调用data了可以调用methods中的方法了")
      },
      beforeMount(){
        console.log("编译之前")
      },
      mounted(){
        console.log("编译已经完成了，在这里可以获取dom");
        window.onscroll = function(){
          console.log(11)
        }
        this.timer = setInterval(()=>{
          console.log(222)
        },1000);
      },
      beforeUpdate(){
        console.log('数据更新了，视图刷新之前');
        console.log(this.$refs['oul'].children)
        //this.$refs['oul'].children[this.$refs['oul'].children.length-1].style.background="red"
      },
      updated(){
        console.log("数据更新，视图已经刷新完成了");
        console.log(this.$refs['oul'].children)
        this.$refs['oul'].children[this.$refs['oul'].children.length-1].style.background="red"
      },
      beforeDestroy(){
        console.log("销毁之前");
        // 清楚 定时器  销毁全局 事件
        window.onscroll = null;
        clearInterval(this.timer)
      },
      destroyed(){
        console.log("组件已经销毁")
      }
    }
    Vue.component('Home',Home)
    let vm = new Vue({
      el:"#app",
      data:{
        isShow:true
      }
    })
  </script>
</body>
</html>